<template>
  <div class="article">
    联系我们
    <div class="article-header"></div>

    <a-table
      :columns="columns"
      :data-source="dataSource"
      @change="handleTableChange"
      :pagination="pagination"
      :rowKey="(dataSource) => dataSource.newId"
    >
      <template slot="name" slot-scope="scope">
        <div class="table-title">
          {{ scope.firstName }} {{ scope.lastNane }}
        </div>
      </template>

      <template slot="phone" slot-scope="scope">
        <div class="table-title">
          {{ scope.phone }}
        </div>
      </template>

      <template slot="email" slot-scope="scope">
        <div class="table-title">
          {{ scope.email }}
        </div>
      </template>

      <template slot="message" slot-scope="scope">
        <div class="table-title">
          {{ scope.messag }}
        </div>
      </template>

      <template slot="company" slot-scope="scope">
        <div class="table-title">
          {{ scope.company }}
        </div>
      </template>

      <template slot="contactType" slot-scope="scope">
        <div class="table-title">
          {{ scope.contactType }}
        </div>
      </template>

      <template slot="time" slot-scope="scope">
        <div class="table-title">
          {{ scope.createTime }}
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
// import { VueEditor } from "vue2-editor";

import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import axios from "axios";

import moment from "moment";

import { relationGet } from "../../api/common";

export default {
  components: {
    quillEditor,
  },
  data() {
    this.dateFormat = "YYYY-MM-DD";
    return {
      addVisible: false,
      addIndex: 0,
      //----------
      artcieTitle: "",
      // 数据
      columns: [
        {
          title: "姓名",
          scopedSlots: { customRender: "name" },
          width: 150,
        },

        {
          title: "电话",
          scopedSlots: { customRender: "phone" },
          width: 200,
        },
        {
          title: "邮箱",
          scopedSlots: { customRender: "email" },
          width: 200,
        },
         {
          title: "公司",
          scopedSlots: { customRender: "company" },
          width: 200,
        },
        {
          title: "信息",
          scopedSlots: { customRender: "message" },
          width: "40%",
        },


        {
          title: "接触方式",
          scopedSlots: { customRender: "contactType" },
          width: 250,
        },
        {
          title: "时间",
          scopedSlots: { customRender: "time" },
          width: 250,
        },
      ],
      dataSource: [],
      page: 1,
      limit: 10,

      pagination: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: (total) => `总共 ${total} 条`,
      },
    };
  },

  created() {
    // 请求文章列表
    this.secMet();
  },
  methods: {
    moment,
    // 请求文章列表
    secMet() {
      let params = {
        pageSize: this.limit,
        pageNo: this.page,
        //-------
      };

      relationGet(params).then((res) => {
        if (res.resultStatus == true) {
          this.dataSource = res.resultData.contactList;
          this.pagination.total = res.resultData.totalNum;
        }
      });
    },

    handleTableChange(pagination) {
      this.page = pagination.current;
      this.limit = pagination.pageSize;

      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.secMet();
    },
    //-----------------
  },
};
</script>

<style lang="less" scoped>
.article {
  .article-header {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header {
      width: 100px;
      height: 35px;
      border: 1px solid;
      margin-right: 35px;
      cursor: pointer;
      background: #775dc0;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-weight: 500;
      font-size: 14px;
    }
  }

  .table-title {
    cursor: pointer;
  }

  .table-display {
    display: flex;

    .display-list {
      margin-right: 30px;
      cursor: pointer;
    }
  }

  .add {
    /deep/ .ant-modal-title {
      text-align: center;
      font-weight: bold;
      font-size: 15px;
      color: #fff;
    }

    /deep/ .ant-modal-header {
      padding: 0;
      height: 40px;
      background: #a6a6a6;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /deep/ .ant-modal-close-x {
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      margin-right: 10px;
      color: #fff;
    }

    /deep/ .ant-modal-body {
      background: #fff;
    }

    /deep/ .ant-modal-footer {
      display: none;
    }

    .add-block {
      margin: 0 auto;
      height: 100%;

      .list {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        height: 35px;

        /deep/ .ant-calendar-picker {
          width: 100%;
        }

        /deep/ .ant-input {
          width: 91%;
          height: 100%;
        }

        /deep/ .el-upload {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .left {
          width: 50px;
          height: 100%;
          text-align: right;
          display: flex;
          align-items: center;
        }

        // .input {
        //   width: 76%;
        // }
        .right {
          padding: 0 10px;
          box-sizing: border-box;
          border: 1px solid #ccc;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 12px;
          border-radius: 4px;
          font-size: 12px;
          cursor: pointer;
          width: 100px;
        }

        .right:hover {
          background: #775dc0;
          color: #fff;
        }
      }
    }

    .block-display {
      display: flex;
      justify-content: space-around;
      margin-top: 40px;

      .block-display-list {
        width: 100px;
        height: 35px;
        border: 1px solid;
        margin-right: 25px;
        cursor: pointer;
        background: #775dc0;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
      }

      .block-display-list:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
